<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="添加地址"
        @click-left="back"
        left-arrow
      ></van-nav-bar>
    </header>
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        show-set-default
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { AddressEdit, Toast, NavBar } from 'vant'
import areaList from '@/utils/area'
import { addAddress } from '@/api'
Vue.use(AddressEdit)
Vue.use(Toast)
Vue.use(NavBar)
export default {
  data () {
    return {
      areaList,
      searchResult: []
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    onSave (content) {
      // console.log(content)
      // 获取表单数据
      const { isDefault, name, tel, province, city, county, addressDetail } = content
      // 处理需要提交的数据
      const data = {
        userid: localStorage.getItem('userid'),
        isDefault: isDefault ? 1 : 0,
        name,
        tel,
        province,
        city,
        county,
        addressDetail
      }
      // 服务器交互
      addAddress(data).then(res => {
        if (res.data.code === '200') {
          Toast('添加成功')
          // 返回上一页
          this.$router.go(-1)
        }
      })
    }
  }
}
</script>
